(function flexible(window, document) {
    const docEl = document.documentElement;
    const dpr = window.devicePixelRatio || 1;
  
    function setBodyFontSize() {
      if (document.body) {
        document.body.style.fontSize = `${12 * dpr}px`;// eslint-disable-line
      } else {
        document.addEventListener('DOMContentLoaded', setBodyFontSize);
      }
    }
    setBodyFontSize();
  
    // set 1rem = viewWidth / 10
    function setRemUnit() {
      // 当超过pad最小尺寸时，固定rem
      let rem = 0;
      if (docEl.clientWidth >= 768) {
        rem = 100;
      } else {
        rem = docEl.clientWidth / 3.75;
      }
      console.log('rem ==========>', rem);
      docEl.style.fontSize = `${rem}px`;
    }
  
    setRemUnit();
  
    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit);
    window.addEventListener('pageshow', function (e) {
      if (e.persisted) {
        setRemUnit();
      }
    });
  
    // detect 0.5px supports
    if (dpr >= 2) {
      const fakeBody = document.createElement('body');
      const testElement = document.createElement('div');
      testElement.style.border = '.5px solid transparent';
      fakeBody.appendChild(testElement);
      docEl.appendChild(fakeBody);
      if (testElement.offsetHeight === 1) {
        docEl.classList.add('hairlines');
      }
      docEl.removeChild(fakeBody);
    }
  })(window, document);